<template>
    <div class="login-container">
        <div class="image-container">
            <!-- <img src="@/assets/agent.png" alt="Hebnu Image" /> -->
            <div class="overlay">
                <div class="text">
                    <div class="title">欢迎登录</div>
                    <div class="subtitle">Welcome to login</div>
                    <hr />
                </div>
            </div>
        </div>
        <div class="form-container">
            <div class="login-form">
                <h2>教育实习管理支持平台</h2>
                <form>
                    <div class="form-group">
                        <input type="text" v-model="username" placeholder="请输入用户名" class="input-field"
                            @focus="handleUsernameFocus" @blur="handleBlur" />
                        <span class="input-label" :class="{ visible: tagUsername }">请输入用户名</span>
                    </div>
                    <div class="form-group">
                        <input type="password" v-model="password" placeholder="请输入密码" class="input-field"
                            @focus="handlePasswordFocus" @blur="handleBlur" />
                        <span class="input-label" :class="{ visible: tagPassword }">请输入密码</span>
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="验证码" v-model="code" class="input" />
                        <canvas ref="verify" :width="width" :height="height" @click="handleDraw"></canvas>
                    </div>
                    <div class="form-group">
                        <input type="checkbox" v-model="remember" />
                        <label>记住密码</label>
                        <a href="#">忘记密码?</a>
                    </div>
                    <a-button type="primary" style="width: 300px;" @click="handleSubmit">登录</a-button>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { useRouter } from 'vue-router'

export default {
    setup() {
        const router = useRouter()
        const verify = ref(null)
        const state = reactive({
            pool: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890', // 字符串
            width: 120,
            height: 40,
            imgCode: ''
        })
        const tagUsername = ref(false);
        const tagPassword = ref(false);

        onMounted(() => {
            // 初始化绘制图片验证码
            state.imgCode = draw()
        })
    
        // 点击图片重新绘制
        const handleDraw = () => {
            state.imgCode = draw()
        }
    
        // 随机数
        const randomNum = (min, max) => {
            return parseInt(Math.random() * (max - min) + min)
        }
        // 随机颜色
        const randomColor = (min, max) => {
            const r = randomNum(min, max)
            const g = randomNum(min, max)
            const b = randomNum(min, max)
            return `rgb(${r},${g},${b})`
        }
    
        // 绘制图片
        const draw = () => {
            const ctx = verify.value.getContext('2d')
            ctx.fillStyle = randomColor(180, 230)
            ctx.fillRect(0, 0, state.width, state.height)
            let imgCode = ''
            for (let i = 0; i < 4; i++) {
                const text = state.pool[randomNum(0, state.pool.length)]
                imgCode += text
                const fontSize = randomNum(18, 40)
                const deg = randomNum(-30, 30)
                ctx.font = fontSize + 'px Simhei'
                ctx.textBaseline = 'top'
                ctx.fillStyle = randomColor(80, 150)
                ctx.save()
                ctx.translate(30 * i + 15, 15)
                ctx.rotate((deg * Math.PI) / 180)
                ctx.fillText(text, -15 + 5, -15)
                ctx.restore()
            }
            for (let i = 0; i < 5; i++) {
                ctx.beginPath()
                ctx.moveTo(randomNum(0, state.width), randomNum(0, state.height))
                ctx.lineTo(randomNum(0, state.width), randomNum(0, state.height))
                ctx.strokeStyle = randomColor(180, 230)
                ctx.closePath()
                ctx.stroke()
            }
            for (let i = 0; i < 40; i++) {
                ctx.beginPath()
                ctx.arc(randomNum(0, state.width), randomNum(0, state.height), 1, 0, 2 * Math.PI)
                ctx.closePath()
                ctx.fillStyle = randomColor(150, 200)
                ctx.fill()
            }
            return imgCode
        }
    
        const username = ref('')
        const password = ref('')
        const remember = ref(false)
        const code = ref('')
    
        const handleUsernameFocus = () => {
                tagUsername.value=false;
        }
            const handlePasswordFocus = () => {
                tagPassword.value=false;
        }
    
        const handleBlur = () => {
            // Check field content on blur and adjust visibility of label
            //在光标离开之后要检测是否有值，如果有就直接不做操作，如果没有就把它弄成true
            if(!username.value){
                tagUsername.value=true;
            }else{
                tagUsername.value=false;
            }//如果没有值就直接弹出来
            if(!password.value){
                tagPassword.value=true;
            }else{
                tagPassword.value=false;
            }//如果没有值就直接弹出来
    
        }
    
        const handleSubmit = () => {
            if (username.value && password.value && code.value === state.imgCode) {
                console.log('Logging in with:', username.value, password.value, 'code:', code.value)
                localStorage.setItem('username', username.value)
                alert('登录成功')
                router.push('/system/home')
            } else if (!username.value || !password.value) {
                alert('请输入用户名和密码')
            } else {
                alert('验证码错误')
            }
        }
    
        return {
            ...toRefs(state),
            tagPassword,
            tagUsername,
            verify,
            handleDraw,
            username,
            password,
            remember,
            handleUsernameFocus,
            handlePasswordFocus,
            handleBlur,
            handleSubmit,
            code,
        }
    },
}
</script>


 <!-- <template>
    <a-layout>
        <a-layout-content>
            <div style="padding: 24px">
                <a-button type="primary" @click="showAddModal">添加学院</a-button>
                <a-button type="danger" @click="batchDelete" style="margin-left: 8px">批量删除</a-button>
                <a-table :columns="columns" :dataSource="dataSource" :rowKey="record => record.id"
                    :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                    style="margin-top: 16px">
                    <template #actions="{ record }">
                        <a @click="showEditModal(record)">编辑</a>
                        <a-divider type="vertical" />
                        <a @click="confirmDelete(record.id)" style="color: red">删除</a>
                        <a-divider type="vertical" />
                        <a @click="showManageMajorsModal(record)">专业管理</a>
                    </template>
                </a-table>
            </div>
            <a-modal title="添加学院" v-model:visible="isAddModalVisible" @ok="handleAddOk">
                <a-form ref="addForm" :model="newCollege" :rules="rules">
                    <a-form-item label="学院名称" name="name">
                        <a-input v-model:value="newCollege.name" placeholder="请输入院系名称" />
                    </a-form-item>
                </a-form>
            </a-modal>
            <a-modal title="编辑学院" v-model:visible="isEditModalVisible" @ok="handleEditOk">
                <a-form :model="editCollege" :rules="rules" ref="editForm">
                    <a-form-item label="学院名称" name="name">
                        <a-input v-model:value="editCollege.name" placeholder="请输入院系名称" />
                    </a-form-item>
                </a-form>
            </a-modal>
            <a-modal title="专业管理" v-model:visible="isManageMajorsModalVisible" @ok="handleManageMajorsOk">
                <p>院系：{{ manageCollege.name }}</p>
                <p>专业：</p>
                <template v-for="(tag, index) in manageCollege.majors" :key="tag">
                    <a-tooltip v-if="tag.length > 20" :title="tag">
                        <a-tag :closable="index !== 0" @close="handleClose(tag)">
                            {{ `${tag.slice(0, 20)}...` }}
                        </a-tag>
                    </a-tooltip>
                    <a-tag v-else :closable="index !== 0" @close="handleClose(tag)">
                        {{ tag }}
                    </a-tag>
                </template>
                <a-input v-if="state.inputVisible" ref="inputRef" v-model:value="state.inputValue" type="text"
                    size="small" :style="{ width: '78px' }" @blur="handleInputConfirm"
                    @keyup.enter="handleInputConfirm" />
                <a-tag v-else style="background: #fff; border-style: dashed" @click="showInput">
                    <plus-outlined />
                    New Tag
                </a-tag>
            </a-modal>
        </a-layout-content>
    </a-layout>
</template>

<script setup>

import { Modal, message } from 'ant-design-vue';
</script> -->